<template>
    <div class="pontInfo">
        <div class="content">
            <!-- <div class="pontName">{{ info.facilityName }}</div> -->
            <div class="info">
                <div class="title">
                    <div class="pontName">{{ info.facilityName }}</div>
                    <div class="rightInfo">
                        <div class="facilityInfo"><span class="name">总投塘条数：</span>{{ info.num }}条</div>
                        <div class="facilityInfo"><span class="name">总投塘重量：</span>{{ info.weight }}斤</div>
                        <!-- <div><span class="name">主要养殖品种：</span> <span>{{ info.mainPlantVariety || '设置' }}</span> </div> -->
                        <div class="facilityInfo"><span class="name">是否封塘：
                                <el-switch :disabled="info.status" v-model="info.status" @change="changeEvent"
                                    active-color="#00acfc" inactive-color="#ff4949">
                                </el-switch>
                            </span></div>
                        <div class="facilityInfo"><el-button :id="`guide_add_${pontInfoIndex}`" type="primary" plain
                                @click="handleEvent">添加投塘</el-button>
                        </div>
                    </div>
                </div>
                <div class="pondData">
                    <div class="img" v-if="info.plantVarietyList.length">
                        <div class="fishFlag" v-for="item, index in info.plantVarietyList" :key="index">
                            <el-popover placement="top-start" trigger="hover" :key="index" :content="item">
                                <img v-if="item.indexOf('鲢')" :src="imgList[0]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('草鱼')" :src="imgList[1]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('对虾')" :src="imgList[2]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('螃蟹')" :src="imgList[3]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('花鲢')" :src="imgList[4]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('青鱼')" :src="imgList[5]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('沼虾')" :src="imgList[6]" alt="" slot="reference">

                                <img v-else-if="item.indexOf('鲢')" :src="imgList[0]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('鱼')" :src="imgList[1]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('蟹')" :src="imgList[2]" alt="" slot="reference">
                                <img v-else-if="item.indexOf('虾')" :src="imgList[6]" alt="" slot="reference">
                                <img :src="item.imgSrc" alt="" slot="reference">
                            </el-popover>
                        </div>
                    </div>
                    <div class="img" v-else></div>
                    <div class="pond">
                        <div class="lookOver">
                            <el-button type="primary" plain @click="viewDetails(info)">投塘详情信息</el-button>
                        </div>
                        <div class="data">
                            <div class="item"> <span class="name">投塘批次名称：</span>
                                <div class="dataInfo">
                                    <el-popover v-show="info.batchList.length > 0" placement="top-start" title="所有批次"
                                        width="300" trigger="hover" :content="info.batchList.join(';')">
                                        <span class="text ellipsis" slot="reference">
                                            <span class="tag">{{ info.batchList.join(';') }}</span>
                                        </span>
                                    </el-popover>
                                    <span class="text" v-show="info.batchList.length == 0">暂无投塘批次！</span>
                                </div>
                            </div>
                            <div class="item"> <span class="name">历史投塘次数：</span>
                                <div class="dataInfo">
                                    <span class="text">{{ info.inputPondList.length }}次</span>
                                </div>
                            </div>
                            <div class="item"> <span class="name">养殖品种：</span>
                                <div class="dataInfo">
                                    <el-popover v-show="info.plantVarietyList.length > 0" placement="top-start"
                                        title="所有品种" width="300" trigger="hover"
                                        :content="info.plantVarietyList.join(';')">
                                        <span class="text ellipsis" slot="reference">
                                            <span class="tag">{{ info.plantVarietyList.join(';') }}</span>
                                        </span>
                                    </el-popover>
                                    <span class="text" v-show="info.plantVarietyList.length == 0">暂无养殖品种！</span>
                                </div>
                            </div>
                            <div class="item"> <span class="name">总投塘条数：</span>
                                <div class="dataInfo"><span class="text">{{ info.num }}粒</span>
                                </div>
                            </div>
                            <div class="item"> <span class="name">总投塘重量：</span>
                                <div class="dataInfo"><span class="text">{{ info.weight }}斤</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import pondInformationManagement from '@/api/pondManagment/pondInformationManagement.js';
import { mapGetters } from 'vuex'
export default {
    components: {},
    props: {
        pontInfo: {
            type: Object,
            default: () => {
                return {}
            }
        },
        pontInfoIndex: {
            type: Number,
            default: () => {
                return 0
            }
        },
    },
    data() {
        return {
            value: true,
            btnFlag: true,
            sortList: [],
            info: {
                num: 0,    //投塘总数量
                weight: 0, //投塘总重量
                batchList: [],   //投塘批次集合
                inputPondList: [], //投塘记录集合
                plantVarietyList: [],  //投塘品种集合
                mainPlantVariety: '',  //主要养殖品种
                status: true,  //是否封塘
            },
            imgList: [
                require("../../../../assets/species/bailian.png"),
                require("../../../../assets/species/caoyu.png"),
                require("../../../../assets/species/duixia.png"),
                require("../../../../assets/species/pangxie.png"),
                require("../../../../assets/species/hualian.png"),
                require("../../../../assets/species/qingyu.png"),
                require("../../../../assets/species/zhaoxia.png")
            ],
            speciesList: [
                {
                    name: '鲢',
                    imgSrc: require("../../../../assets/species/bailian.png")
                }, {
                    name: '鱼',
                    imgSrc: require("../../../../assets/species/caoyu.png")
                }, {
                    name: '虾',
                    imgSrc: require("../../../../assets/species/duixia.png")
                }, {
                    name: '蟹',
                    imgSrc: require("../../../../assets/species/pangxie.png")
                }
                // , {
                //     name: '花鲢',
                //     imgSrc: require("../../../../assets/species/hualian.png")
                // }, {
                //     name: '青鱼',
                //     imgSrc: require("../../../../assets/species/qingyu.png")
                // }, {
                //     name: '沼虾',
                //     imgSrc: require("../../../../assets/species/zhaoxia.png")
                // }
            ]
        }
    },
    computed: {
        ...mapGetters([
            'codeList'
        ])
    },
    watch: {
        pontInfo: {
            handler(v) {
                console.log(v)
                this.getInfoData(JSON.parse(JSON.stringify(v)))
            },
            deep: true
        }
    },
    mounted() {
        this.sortList = this.randomSort(this.speciesList);
        this.btnFlag = this.codeList.indexOf('add') !== -1;
        this.getInfoData(this.pontInfo)
    },
    methods: {
        getInfoData(data) {
            console.log(data)
            let inputPondDetailList = [];
            let inputPondList = data.inputInfo.inputPondList || [];
            inputPondList.forEach(item => {
                inputPondDetailList = inputPondDetailList.concat(item.inputPondDetailList || [])
            })
            console.log(inputPondDetailList)
            this.info = {
                num: data.inputInfo.totalNum || this.reduceFn(inputPondDetailList, 'num'),    //投塘总数量
                weight: data.inputInfo.totalWeight || this.reduceFn(inputPondDetailList, 'weight'), //投塘总重量
                batchList: this.getKeyList(inputPondList, 'batchName'),   //投塘批次集合
                inputPondList: inputPondList, //投塘记录集合
                plantVarietyList: this.getKeyList(inputPondDetailList, 'plantVarietyName'),  //投塘品种集合
                mainPlantVariety: '',  //主要养殖品种
                status: data.inputInfo.status ? true : false,  //是否封塘
                facilityName: data.facilityName,  //鱼塘名称
                facilityId: data.facilityId
            }
        },
        reduceFn(arr, key) {
            const sum = arr.reduce((accumulator, currentObject) => {
                return accumulator + Number(currentObject[key]);
            }, 0);
            return sum;
        },
        getKeyList(arr, key) {
            let list = arr.map(item => {
                return item[key]
            })
            list = list.filter(item => {
                if (typeof item === 'string') {
                    return item.trim() !== ''; // 使用 trim() 去除字符串两端的空格后检查是否为空  
                } else {
                    return item != null; // 对于非字符串类型，检查是否为 null 或 undefined  
                }
            });
            //简单去重  数据格式复杂不可以用这个方法
            return [...new Set(list)];
        },
        handleEvent() {
            if (!this.btnFlag) {
                this.$message.warning('无权限操作')
                return
            }
            this.$emit('handleEvent', this.pontInfo)
        },
        viewDetails(data) {
            this.$emit('viewDetails', data)
        },
        changeEvent(flag) {
            this.$confirm('此操作将不可逆, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let data = this.pontInfo
                let res = await pondInformationManagement.sealPond(data.facilityId)
                console.log(res)
                if (res.code == 1) {
                    this.info.status = true;
                    this.$message.success(res.msg || '操作成功!');
                } else {
                    this.info.status = false;
                    this.$message.warning(res.msg || '操作失败!');
                }
            }).catch(() => {
                this.info.status = false
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        //数组随机
        randomSort(arr) {
            arr.sort(function () {
                return 0.5 - Math.random();
            });
            return arr;
        }
    }
};
</script>
<style lang="scss" scoped>
.pontInfo {
    width: 100%;
    margin-bottom: 15px;
    transition: all 0.3s;

    .content {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        border: 1px solid #dee2e2;
        transition: all 0.3s;
        // overflow: auto;
    }

    .content:hover {
        border: 1px solid #c2c4c4;
    }

    // .pontName {
    //     width: 40px;
    //     background-color: #00acfc;
    //     color: #ffffff;
    //     padding: 0 5px;
    //     font-size: 16px;
    //     text-align: center;
    //     vertical-align: middle;
    //     display: flex;
    //     align-items: center;
    // }
    .pontName {
        font-size: 16px;
        text-align: left;
        font-weight: bolder;
        color: #4381b5;
    }

    .rightInfo {
        display: flex;
        align-items: center;

        .facilityInfo {
            padding: 0 20px;
        }
    }

    .info {
        flex: 1;

        .title {
            width: 100%;
            height: 40px;
            padding: 0 20px;
            background-color: #f2f4f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #666666;
            border-bottom: 1px solid #e0e0e0;

            .name {
                color: #00acfc;
            }
        }

        .pondData {
            display: flex;
            justify-content: flex-start;
            min-width: 1000px;

            .img {
                width: 450px;
                min-height: 180px;
                background: rgb(121, 121, 121);
                background: url(../../../../assets/fishPond.png) no-repeat;
                background-size: 100% 100%;
                margin: 10px 20px;
                display: flex;
                align-content: flex-end;
                flex-wrap: wrap;
                border: 1px solid #cecece;

                .fishFlag {
                    width: calc(100% / 4);
                    height: 35px;
                    margin: 0 auto;

                    img {
                        width: 70%;
                    }
                }
            }

            .pond {
                width: calc(100% - 520px);
                margin: 20px 20px;
                margin-left: 0;

                .data {
                    width: 100%;
                    padding: 0 15px;
                    font-size: 14px;
                    display: flex;
                    flex-wrap: wrap;

                    .item {
                        width: calc(100% / 3);
                        min-width: 300px;
                        padding-right: 10px;
                        padding-top: 20px;
                        color: #00acfc;
                        display: flex;
                        justify-content: flex-start;
                        line-height: 26px;

                        .name {
                            width: 130px !important;
                        }

                        .dataInfo {
                            width: calc(100% - 130px);
                            color: #666666;

                            .tag {
                                padding-right: 10px;
                            }
                        }


                    }
                }
            }
        }
    }
}

.pontInfo:hover {
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.1);
    background-color: #ffffff;
}

.ellipsis {
    display: inline-block;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出显示省略号
    white-space: nowrap; //文本不会换行
}
</style>